<!--
 * Date: 2018年10月23日 13:28:06
 * LastEditors: lvyou
 * LastEditTime: 2019年11月27日 16:28:28
 * FilePath: \youlinweb-master\src\pages\mine\myPublish.vue
 * copyright(c) 2019-2025 版权为浙江双城网络科技集团有限公司所有，违者必究。
 -->
<template>
	<div>
     <ylheader :leftsvg="true" :title="'我发布的'"></ylheader>
		<!--我发布的-->
		<mt-navbar v-if="isMyPublish" fixed style="margin-top: 0.88rem;border-bottom:1px solid #e6e6e6" :class="'interaction-navbar'" v-model="myPublish">
			<mt-tab-item id="12">闲置</mt-tab-item>
			<mt-tab-item id="11">说说</mt-tab-item>
		</mt-navbar>
    <div v-if="isMyPublish" class="interaction-navbar-sep"></div>

 

		<div style="margin-top:1rem;background-color:#fff">
			<newmyJoinUnuse v-if="12 == myPublish && isMyPublish"></newmyJoinUnuse>
			<myPublicTalk v-if="11 == myPublish && isMyPublish"
			></myPublicTalk>
		</div>

	</div>
</template>
<script>
	import {  Navbar , TabItem } from 'mint-ui';
	import ylheader from 'src/components/yl-header'
	import myPublicTalk from 'pages/mine/publicTalk'
	import newmyJoinUnuse from 'src/components/myinteration/newmyjoinunuse.vue'
	import api from 'src/api/index'
	import shuoshuo  from 'pages/shuohsuo/shuoshuo'
  import {mapState, mapMutations} from 'vuex'
	export default{
    name:"myInteraction",
		data () {
			return {
        watchIspublish:'',
				isMyPublish:"",
				myPublish:'',
				selected : '',
				dataList:[],
				msg : "我的互动"
			}
    },
    mounted () {
      this.isMyPublish = this.isMyPublishStatue ;
      this.myPublish = this.myPublishStatue ;
      this.selected = this.interactionSelected ;
    },
    watch:{
      isMyPublish(val){
          this.changeisMyPublishStatue(val)
          this.isMyPublish = val
      },
      myPublish(val){
          this.changemyPublishStatue(val) ;
          this.myPublish = val ;
      },
      selected(val){
          this.changeinteractionSelected(val) ;
          this.selected = val ;
      }
    },
    computed:{
      ...mapState([
        'isMyPublishStatue','myPublishStatue','interactionSelected'
      ])
    },
		methods : {
      ...mapMutations([
        'changeisMyPublishStatue','changemyPublishStatue','changeinteractionSelected'
      ]),

		},
    components: {
      Navbar , TabItem , ylheader, myPublicTalk , shuoshuo,newmyJoinUnuse
    }
	}
</script>
<style lang="less">
  .myjoin-navbar{
    border-bottom: 1px solid #e6e6e6;
    padding: 0 0.46rem 0 0.46rem;
    justify-content: space-between;
    height: 0.9rem;
    .mint-tab-item {
        width: 1rem;
      }
      .mint-tab-item-label {
        font-size: 0.3rem;
        font-family: "PingFangSC Regular";
      }
      .mint-tab-item {
        color: #494949;
        flex: inherit;
      }
      .mint-tab-item.is-selected {
        color: #fb685b;
        width: 1rem;
        border-bottom: 0.02rem solid #fb685b;
      }
      .mint-tab-item.is-selected {
        margin-bottom: 0;
      }
  }


	.interaction-navbar{
    padding: 0 1.46rem 0 1.46rem;
    justify-content: space-between;
		position:fixed;

    .mint-tab-item-label{
        line-height: 0.08rem;
      font-size: 0.3rem;
      font-family: "PingFangSC Regular";
    }
    .mint-tab-item{
       color: #494949;
      width: 1rem;
      flex: inherit;
    }
    .mint-tab-item.is-selected{
    color: #fb685b;
    width: 1rem;
    border-bottom: 0.02rem solid #fb685b;
    }
    .mint-tab-item.is-selected{
      margin-bottom: 0;
    }
	}

	.interaction-header .mint-header .is-fixed{
		z-index:2 !important;
	}
  .interaction-navbar-sep{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 3.76rem;
    top: 1.08rem;
    z-index: 2;
  }
  .myjoin-navbar-sep{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 1.9rem;
    top: 1.08rem;
    z-index: 2;
  }
  .myjoin-navbar-septwo{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 3.68rem;
    top: 1.08rem;
    z-index: 2;
  }
  .myjoin-navbar-septhree{
    background-color: #E6E6E6;
    width: 1px;
    height:0.5rem;
    position: fixed;
    left: 5.49rem;
    top: 1.08rem;
    z-index: 2;
  }
</style>
